<template>
	<uv-navbar
	  :fixed="false"
	  @leftClick="$onClickLeft"
	  bgColor="#09b4f1"
	>
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="container">
		<view class="bare">
			<!-- 顶部导航高度 -->
			<view class="statusBar"></view>
		</view>
		<view class="notice">
			<view class="belong">
				<view class="left flex-1">
					<view class="store">{{business.name}}</view>
				</view>
				<view class="flex">
					<uv-text v-if="business.isEnd === 1" type="success" text="成交"></uv-text>
					 <uv-text v-else-if="business.isEnd === 2" type="error" text="失败"></uv-text>
					 <uv-text v-else-if="business.isEnd === 3" type="info" text="无效"></uv-text>
					<uv-text v-else type="warning" text="洽谈中"></uv-text>
					<uv-icon name="arrow-right" color="#09b4f1" :size="16"></uv-icon>
				</view>
			</view>
			<view class="relation flex">
				<view class="left">备注：<text class="dial">{{business.remark ? business.remark : '--'}}</text></view>
			</view>
			<view class="bottom flex">
				<view class="client_time">下次跟进：{{timeFormats(business.nextTime)}}</view>
				<view class="right">{{business.ownUserName ? business.ownUserName : '--'}}</view>
			</view>
			<view class="more flex" @click="onLookMore">查看更多<uv-icon name="arrow-down" size="16" ></uv-icon></view>
		</view>
		<!-- 工具项 -->
		<view class="region mt-3">
			<view class="border-bottom">
				<uv-tabs :list="tapList"   :scrollable="false" :current="current" @change="change"></uv-tabs>
			</view>
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop"  @scrolltolower="reachBottom">
				<view class="page-box">
					<!-- 跟进记录 -->
					<block v-if="current == 0" >
						<block v-if="recordList.length > 0">
							<view class="list-view" v-for="(item, index) in recordList" :key="index">
								<view class="top">
									<uv-parse class="left" :content="item.content"></uv-parse>
								</view>
								<view class="bottom">
									<view class="time">{{timeFormats(item.createTime)}}</view>
									<view class="way">{{item.recordTypeName}}</view>
								</view>
							</view>
							<uv-load-more  :status="listStatus" />
						</block>
						<uv-empty text="暂无数据" v-else  margin-top="100" mode="list"></uv-empty>
					</block>
					<!-- 产品列表 -->
					<block v-if="current == 1">
						<block v-if="productList.length > 0">
							<view class="list-view" v-for="(item,index) in productList" :key="index">
								<view class="contact">
									<view class="name">
									  <view>{{item.name}}（{{item.sku}})</view>
									  <view style="color: red;margin-top: 20rpx;">¥{{item.price}}</view>
									</view>
									<view class="dial">×{{item.nums}}</view>
								</view>
								<view style="text-align: right;font-weight: bold;">小计：¥{{item.subtotal}}</view>
							</view>
						</block>
						<uv-empty text="暂无数据" v-else  margin-top="100" mode="list"></uv-empty>
					</block>
		
				</view>
			</scroll-view>
		</view>
		<!-- 上拉菜单 -->
		<view class="popup-content">
			<uv-popup mode="bottom"  round="38"  ref="moreShowRef" >
				<view class="popup-title">
					<view class="" @click="look()" style="width: 45px;">
					</view>
					<text class="">更多操作</text> 
					<view class="" @click="moreShowClose" style="width: 45px;">
						<uv-icon name="close"  color="#909399" size="20"></uv-icon>
					</view>
				</view>
				<view class="" style="height: 300rpx;">
					<uv-grid :col="4">
						<uv-grid-item v-for="(item,index) in moreList" @click="moreClick(item.text)" :key="index" >
							<uv-icon :name="item.icon" :size="26"></uv-icon>
							<view class="grid-text">{{item.text}}</view>
						</uv-grid-item>
					</uv-grid>
				</view>
			</uv-popup>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-btn" >
			<uv-button :plain="true" @click="moreShow" customStyle="padding:0 80rpx;border:solid">更多</uv-button>
			<view class="btn entity ml-1"  @click="onAdd">跟进</view>
		</view>
	
	</view>
</template>

<script setup>
import {
	ref,
	unref,
	computed
} from 'vue'
import { onLoad,onShow ,onReady} from '@dcloudio/uni-app'
import {
  getDictData,
  getCustomer,
  getCustomerDoOpen,
  getRecordPage,
  delCustomer
} from '@/api/customer'
import {
 getBusiness,
 getBusinessProductListByBusinessId,
 delBusiness
} from '@/api/business'
import { formatDateTime,prePage } from '@/utils/util'
const title = ref('商机详情')
const businessId = ref(0)
const business = ref( {
	purchaseTotal: 0,
})
const scrollTop =ref('')
const tapList = ref([
	{
		name: '跟进'
	},
	{
		name: '意向商品'
	},
	{
		name: '客户信息',
	}
])
const moreList = ref([
	{
		text: '编辑商机',
		icon: 'edit-pen',
		show: true,
	},

	{
		text: '删除商机',
		icon: 'trash',
		show: true,
	}
	
])
const recordList = ref([])
const productList = ref([])
const businessList = ref([])
const selectList = ref([])
const htList = ref([])
const hkList = ref([])
const current = ref(0)
const navbar = ref(false)
const pH = ref(0)
const scrollHeight = ref(0)
const page = ref(1)
const pageSize = ref(10)
const lastPage = ref(false)
const listStatus = ref('loadmore')



onReady(()=>{
	uni.getSystemInfo({ 
		success(res) {
			pH.value = res.windowHeight 
			let scrollH = uni.createSelectorQuery().select(".sv")
			scrollH.boundingClientRect(data=>{
				let pH0 = pH.value
				scrollHeight.value = pH0 - data.top - 80 
			}).exec()
		}
	})
})

onLoad((e) => {
	console.log('e:',e)
	businessId.value = e.id
	console.log('businessId.value:',businessId.value)
	getData()
})

onShow(()=>{
	getData()
	switch (current.value) {
		case 0:
			page.value = 1
			lastPage.value = false
			getCustomerRecord()
			break;
		default:
			break;
	}
})

const purchaseTotalFormat = computed(() =>{
	console.log('')
	if(customer.value.purchaseTotal) {
		let num;
		if (customer.value.purchaseTotal > 9999) { //大于9999显示x.xx万
			num = (Math.floor(customer.value.purchaseTotal / 100) / 100) + '万';
		} else if (customer.value.purchaseTotal <= 9999 && customer.value.purchaseTotal > -9999) {
			num = customer.value.purchaseTotal 
		}
		return num;
	} else {
		return 0;
	}
})


			
// 查看更多
const onLookMore = () => {
	uni.navigateTo({
		url: '/pages/components/pages/business/add?id=' + businessId.value + '&type=edit'
	});
}
// 拨打电话
const call = (p) => {
	uni.makePhoneCall({
		phoneNumber: p 
	});
}

const moreShowRef = ref()
const moreShow = () => {
	unref(moreShowRef).open()
}

const moreShowClose = () => {
	unref(moreShowRef).close()
}

// 更多操作
const moreClick = async(index) => {
	switch (index) {
		case "编辑商机":
			// 编辑客户
			uni.navigateTo({
				url: '/pages/components/pages/business/add?id=' + business.value.id + '&type=edit'
			});
			break;
		case "删除商机":
			unref(moreShowRef).close()
			uni.showModal({
				title: '提示',
				content: '确定删除该商机吗？',
				success: async function (res) {
					if (res.confirm) {
						await delBusiness({id:businessId.value})
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						})
						prePage().$vm.isRefresh = true
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					
					}
				}
			});
			break;
		default:
			break;
	}
}
			
// 格式化时间
const timeFormats = (val) => {
	if(val) {
		return formatDateTime(val)
	} else {
		return '--'
	}
}
// 获取客户详情
const getData = async() => {
	let data = await getBusiness({id:businessId.value})
	business.value = data
}
// 获取客户跟进记录
const getCustomerRecord = async(isNextPage,pages) =>  {
	let data = await getRecordPage({
		pageNo: page.value,
		pageSize: pageSize.value,
		types: 'business',
		typesId: businessId.value
	})
	// 不够一页
	if (data.list.length < 10) {
		listStatus.value = 'nomore'
	}
	// 最后一页
	if(data.list.length == 0) {
		lastPage.value = true
	} 
	// 第二页开始
	if(isNextPage) {
		recordList.value = recordList.value.concat(data.list)
		return 
	}
	recordList.value = data.list
	console.log('recordList.value:',recordList.value)
	
}


const reachBottom = () => {
	switch (current.value) {
		case 0:
			if(lastPage.value || listStatus.value == 'loading') return ;
			listStatus.value = 'loading'
			setTimeout(() => {
				if(lastPage.value) return ;
				getCustomerRecord(true,++page.value)
				if(recordList.value.length >= 10) listStatus.value = 'loadmore';
				else listStatus.value = 'loading';
			}, 1200)
			break;
		
		default:
			return '--'
			break;
	}
}
// 切换导航栏
const change = async(e) => {
	let index = e.index
	current.value = index;
	switch (index) {
		case 0:
			page.value = 1
			lastPage.value = false
			getCustomerRecord()
			break;
		case 1:
			productList.value = await getBusinessProductListByBusinessId({businessId:businessId.value})
			break;
		case 2:
			uni.navigateTo({
				url: '/pages/components/pages/customer/customerDetails?id=' + business.value.customerId
			});
			break;
		default:
			break;
	}
}
// 商机跟进
const follow = (id,name) => {
	uni.navigateTo({
		url: '/pages/components/pages/customer/followUp?customerId=' + id + '&customerName=' + name
	})
}
// 跟进客户
const onAdd = (e) => {
	// uni.navigateTo({
	// 	url: '/pages/components/pages/business/followUp?businessId=' + id + '&businessName=' + name
	// })
	uni.navigateTo({
		url: '/pages/components/pages/business/followUp?businessId=' + business.value.id + '&businessName=' + business.value.name
	})
}

</script>

<style lang="scss" scoped>
.container {
	background-color: #F7F7F7 !important;
}
.bare {
	color: #fff;
	background-color: #09b4f1; 
}
.notice {
	margin: -68px 8px 10px 8px;
	left: 0;
	right: 0;
	background-color: #fff;
	border-radius: 10px;
	padding: 25rpx 20rpx 35rpx;
	.belong {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			padding-right: 25rpx;
			.store {
				font-size: 30rpx;
				font-weight: bold;
				word-break: break-all;
			}
		}
		.right {
			color: #FF7159;
		}
		.right1 {
			color: #FF7159;
		}
	}
	.tap {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 20rpx 0 0;
		.tap-item {
			background-color: #FF6146;
			color: #fff;
			font-size: 25rpx;
			padding: 10rpx 25rpx;
			border-radius: 8rpx;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
		}
	}
	.relation {
		justify-content: space-between;
		margin-top: 15rpx; 
		font-size: 26rpx;
		.dial {
			color: #2979ff;
			font-size: 14px;
			padding-bottom: 0px;
		}
	}
	.bottom {
		margin-top: 25rpx;
		justify-content: space-between;
		.client_time {
			color: #777;
			font-size: 26rpx;
		}
	}
	.more {
		padding-top: 25rpx; 
		justify-content: center;
		color: #2979ff;
	}
	.details {
		padding: 45rpx 0rpx 0rpx;
		.item {
			flex: 1;
			margin-bottom: 25rpx;
			.text {
				font-size: 25rpx; 
				color: #777;
			}
		}
	}
}

.statusBar {
	position: relative;
	z-index: -1;
	height: 188rpx;
}

.page-box {
	padding: 20rpx 20rpx 45rpx;
}
.list-view {
	width: 710rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			word-break:break-all;
			width: 100%;
			.store {
				margin: 0 10rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		.right {
			color: #F76046;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			.image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}
			.video {
				width: 140rpx;
				height: 140rpx;
			}
		}
		.content {
			flex: 1;
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 20rpx 0;
				font-size: 26rpx;
				color: $uv-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
	}
	.contact {
		padding: 25rpx 0;
		display: flex;
		justify-content: space-between;
		.name {

		}
		.dial {
			color: #2979ff;
			font-size: 14px;
			padding-bottom: 0px;
		}
	}
	.bottom {
		display: flex;
		margin-top: 10rpx;
		justify-content: space-between;
		align-items: center;
		.time {
			color: #777;
  		font-size: 26rpx;
		}
		.btn {
			line-height: 60rpx;
			width: 160rpx;
			border-radius: 5px;
			font-size: 26rpx;
			text-align: center;
			color: $uv-primary-dark;
		}
		.entity {
			color: #fff;
			background-color: #09b4f1; 
		}
	}
}
.bottom-btn {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 25rpx 30rpx 45rpx;
	background-color: #fff;
	z-index: 100;
	.btn {
		float: right;
		line-height: 43rpx;
		padding: 15rpx 36rpx;
		border-radius: 5px;
		font-size: 28rpx;
		text-align: center;
	}
	.entity {
		color: #fff;
		background-color: #09b4f1; 
	}
}
 .popup-content {
	.popup-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		font-size: 35rpx;
		font-weight: 600;
		text-align: center;
		height: 50px;
		padding-right: 25rpx;
	}
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
	}
}
</style>
